<template>
  <div id="showHead">
    <img src="../../static/images/logo.png" @click="dataStatistics()" alt="">
    <div style="color: #D7DFE8">v2.4</div>
    <div class="user">
      <div class="message">
        <div class="topnav">
          <ul>
            <li @click="dataStatistics()" :class="[chooseIt==1?'onshow':'']">首页</li>
            <li @click='deviceadd()' :class="[chooseIt==2?'onshow':'']">设备中心</li>
            <li @click='communitymanagement()' :class="[chooseIt==9?'onshow':'']">园区管理</li>
            <!--<li @click='templatemanagement()' :class="[chooseIt==10?'onshow':'']">模板管理</li>-->
            <li @click='fundsManagement()' :class="[chooseIt==3?'onshow':'']">业绩管理</li>
            <li @click="userManagement()" :class="[chooseIt==4?'onshow':'']">用户管理</li>
            <li @click="staffManagement()" :class="[chooseIt==13?'onshow':'']">员工管理</li>
            <li @click='cardrecharge()' :class="[chooseIt==5?'onshow':'']">水卡管理</li>
            <li @click="orderManagement()" :class="[chooseIt==6?'onshow':'']">订单管理</li>
            <li v-if="!is_join" @click="addshop()">加盟商管理</li>
            <li @click="promotion()" :class="[chooseIt==12?'onshow':'']">经营管理</li>
            <li @click="accountsetting()" :class="[chooseIt==7?'onshow':'']">账户设置</li>
            <!--<li @click='announcementList()' :class="[chooseIt==8?'onshow':'']">平台公告</li>-->
          </ul>
        </div>
        <div class="rightnav">
          <div class="ding" @click="announcementList()">
            <img src="../../static/images/msg-icon.png" alt="">
          </div>
          <el-dropdown trigger="click"
            style='background: #fff;border: none;height:40px;line-height:40px;padding:0px 15px;'>
            <span class="el-dropdown-link">
              {{userName==' '?'暂未登录':userName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  @click.native="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'showHead',
    props: ['chooseIt'],

    data: function () {
      return {
        userName: ' ', //用户名称
        userinfo: [],
        is_join: true,//是否加盟商
      }
    },
    created: function () {
      this.userName = locache.get('userName');
      // console.log('执行')
      this.getPartnerMsg();
    },
    methods: {
      //获取合伙人信息
      getPartnerMsg() {
        var that = this;
        that.$post({
          url: 'Partner/Setup/get_partner',
          data: {
          },
          success: function (data) {
            that.userinfo = data.data;
            if (data.data.superior_id != '0') {
              that.is_join = true;
            } else {
              that.is_join = false;
            }
          }

        })
      },
      //刷新
      reload() {
        location.reload()
        //this.$root.reload()
        //this.$router.replace('/refresh')
      },
      //选择
      handleCommand(command) {
        this.$message('click on item ' + command);
      },
      //跳转首页
      dataStatistics: function () {
        this.$router.push({
          path: '/dataStatistics'
        })
      },
      //跳转资金管理
      fundsManagement: function () {
        this.$router.push({
          path: '/fundsManagement'
        })
      },
      //水卡管理
      cardrecharge() {
        this.$router.push({
          path: '/cardrechargeol'
        })
      },
      //加盟商管理
      addshop() {
        this.$message({
          showClose: true,
          message: '该功能暂未开放,请使用小程序管理',
          center: true
        });
      },
      //促销管理
      promotion() {
        this.$router.push({
          path: '/promotionList'
        })
      },
      //跳转订单管理
      orderManagement() {
        this.$router.push({
          path: '/orderManagement'
        })
      },
      //跳转公告
      announcementList() {
        this.$router.push({
          path: '/announcementList'
        })

      },

      //跳转用户管理
      userManagement: function () {
        this.$router.push({
          path: '/user'
        })
      },
      //跳转员工管理
      staffManagement: function () {
        this.$router.push({
          path: '/promoterList'
        })
      },
      //跳转设备管理
      deviceadd: function () {
        locache.set('deviceListPage', 1);
        this.$router.push({
          path: '/devicelist'
        })
      },

      //跳转设置
      accountsetting: function () {
        this.$router.push({
          path: '/accountsetting'
        })
      },
      //跳转消息
      jumpInformatica() {
        this.$router.push({
          path: '/messageList'
        })

      },
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      },
      //账户信息
      jumpAccountInformation() {
        this.$message({
          showClose: true,
          message: '该功能暂未开放,敬请期待',
          center: true
        });
      },
      //退出登录
      logout() {
        var _this = this;
        this.$confirm('确认退出吗?', '提示', {}).then(() => {
          var token = locache.get('token');
          //console.log('token>>>>>>>>>>',token);
          locache.set('token', ' ');
          locache.set('userName', ' ');
          locache.set('deviceListPage', 1);
          locache.set('Size', null);
          var token = locache.get('token');
          //console.log('之后的token>>>',token);
          _this.$router.push('/');
        }).catch(() => {

        });
      },
      //园区管理
      communitymanagement() {
        this.$router.push({
          path: '/communityList'
        })
      },
      //模板管理
      templatemanagement() {
        this.$router.push({
          path: '/onlineTemplate'
        })
      }

    },
    mounted() {

    },
    watch: {

    }
  }

</script>
<style>
  #home {
    margin: 0 auto;
  }

  header {
    /* 头部导航 */
    z-index: 1000;
    height: 80px； background：#FF6565;
    min-width: 1190px;
    transition: all 0.5s ease;
    border-top: solid 4px #3091F2;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
  }

  header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  header .el-menu-demo {
    padding-left: 300px !important;
  }

  #showHead {
    /*下拉选项*/
    position: relative;
    width: 100%;
    height: 80px;
    background: #2c5586;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #showHead>img {
    margin-left: 70px;
    height: 80px;
    width: 220px;
    cursor: pointer;
    position: relative;
    top: 7px;
  }

  #showHead .user {
    display: flex;
    width: 100%;
  }

  #showHead .user .message {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    font-weight: bold;
  }

  #showHead .user .message .rightnav {
    display: flex;
    align-items: center;
  }

  #showHead .rightnav {}

  #showHead .topnav {
    width: 75%;
    margin-left: 5%;
  }

  #showHead .topnav ul {
    /*display: flex;*/
    align-items: center;
    padding-left: 0;
  }

  #showHead .topnav ul li {
    display: inline-block;
    padding: 15px 0px;
    margin: 0 1%;
    cursor: pointer;
    font-size: 16px;
  }

  #showHead .rightnav .ding {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 20px;
    cursor: pointer;
  }

  #showHead .rightnav .ding span {
    position: absolute;
    background-color: #bc1b21;
    top: -15px;
    right: -15px;
    border-radius: 50%;
    font-size: 14px;
    padding: 2px;
  }

  #showHead .el-menu--horizontal>.el-submenu .el-submenu__title {
    background-color: #2c5586;
    color: #fff;
    border-bottom: 0;
  }

  #showHead .el-menu--horizontal {
    border-bottom: 0;
  }

  /*
.el-menu-item,
.el-submenu__title {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #323333;
  height: 70px;
  line-height: 70px;
}*/


  #showHead .el-submenu .el-menu-item {
    height: 70px;
    line-height: 70px;
    font-size: 14px !important;
    font-weight: normal !important;
  }

  #showHead .main-left .el-submenu__title {
    color: #323333;
  }

  #showHead .onshow {
    display: flex;
    border-bottom: 2px solid #fff;
  }

  #showHead .userName {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

   .el-dropdown-menu{
    text-align: center !important;
  }
</style>